<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/tb.css">
    <title>淘宝网-淘!我喜欢</title>
</head>

<body>

    <div class="wapper">
        <!-- 导航栏 + 广告 -->
        <div class="top-nav-wrap">
            <div class="top-nav">
                <ul class="top-nav-l">
                    <li class="top-nav-menu china">
                        <a href="#">中国大陆</a>
                        <span class="bg-pic pic_xsj"></span>
                    </li>
                    <li class="top-nav-menu loginSign">
                        <a href="#" class="login">亲，请登录</a>
                        <a href="#" class="sign">免费注册</a>
                    </li>
                    <li class="top-nav-menu mobile">
                        <a href="#">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="top-nav-r">
                    <li class="top-nav-menu my-taobao">
                        <a href="#">
                            <span>我的淘宝</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu shopping">
                        <a href="#">
                            <span class="bg-pic shoppingcar"></span>
                            <span>购物车</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu like">
                        <a href="#">
                            <span class="bg-pic star"></span>
                            <span>收藏夹</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu classify">
                        <a href="#">商品分类</a>
                    </li>
                    <li class="top-nav-menu split">
                        <span>|</span>
                    </li>
                    <li class="top-nav-menu qianniu">
                        <a href="#">
                            <span>千牛卖家中心</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu contact">
                        <a href="#">
                            <span>联系客服</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu web-nav">
                        <a href="#">
                            <span class="bg-pic nav"></span>
                            <span>网站导航</span>
                            <span class="bg-pic pic_xsj"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="top-ad">
                <div class="ad">
                    <img src="https://img.alicdn.com/tfs/TB1sob5jQvoK1RjSZFNXXcxMVXa-1190-70.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 搜索栏 -->
        <div class="search-wrap">
            <div class="search-content">
                <div class="search-logo"></div>
                <div class="search-panel">
                    <div class="search-header">
                        <div class="search-top">
                            <ul>
                                <li class="active">宝贝</li>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ul>
                        </div>
                        <div class="search-form-box">
                            <a href="#" class="pg-pic searchs"></a>
                            <form action="#" class="search-form">
                                <input type="text" class="input" placeholder="连衣裙">
                                <input type="submit" class="submit" value="搜索">
                            </form>
                            <a href="#" class="pg-pic camera"></a>
                        </div>
                    </div>
                    <div class="search-buttom">
                        <ul>
                            <li>腰带</li>
                            <li>礼物摆件</li>
                            <li>泳衣</li>
                            <li>时尚连衣裙</li>
                            <li>衬衫</li>
                            <li>新款男鞋</li>
                            <li>蓝牙耳机</li>
                            <li>沙发</li>
                        </ul>
                    </div>
                </div>
                <div class="search-code">
                    <a href="#">
                        <span>
                            手机淘宝
                        </span>
                        <img class="code">
                    </a>
                    <a href="#" class="close">X</a>
                </div>
            </div>
        </div>
        <!-- 导航条 -->
        <div class="screen-nav">
            <div class="screen-nav-content">
                <h2>主题市场</h2>
                <ul>
                    <li>
                        <a href="#">天猫</a>
                    </li>
                    <li>
                        <a href="#">聚划算</a>
                    </li>
                    <li>
                        <a href="#">天猫超市</a>
                    </li>
                </ul>

                <ul>
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">淘抢购</a>
                    </li>
                    <li>
                        <a href="#">电器城</a>
                    </li>
                    <li>
                        <a href="#">司法拍卖</a>
                    </li>
                    <li>
                        <a href="#">淘宝心选</a>
                    </li>
                    <li>
                        <a href="#">兴农扶贫</a>
                    </li>
                </ul>

                <ul>
                    <li>
                        <a href="#">|</a>
                    </li>
                    <li>
                        <a href="#">飞猪旅行</a>
                    </li>
                    <li>
                        <a href="#">智能生活</a>
                    </li>
                    <li>
                        <a href="#">苏宁易购</a>
                    </li>
                </ul>
            </div>


        </div>
        <!-- 页面主题展示 -->
        <div class="screen-box">
            <div class="screen-content">
                <div class="screen-left">
                    <!-- 左侧区域 -->
                    <div class="screen-left-top">
                        <div class="screen-left-top-guide">
                            <ul>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                                <li>
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>/
                                    <a href="#" class="guide_text">女装</a>
                                    <span class="guide_arrows"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="screen-banner">
                            <div class="top-banner"></div>
                            <div class="mid-ad">
                                <img>
                                <span>理想生活上天猫</span>
                            </div>
                            <div class="bottem-banner"></div>
                        </div>
                        <div class="screen-right-ad">
                            <div class="top-banner"></div>
                            <div class="mid-ad">
                                <span>今日热卖</span>
                            </div>
                            <div class="bottem-banner"></div>
                        </div>
                    </div>
                    <div class="screen-left-bottom">
                        <div class="screen-content">
                            <div class="taobao-top-pic">
                            </div>
                            <a href="#">
                                <img>
                                <h4>大模王带你细数有趣的万圣节cos！</h4>
                                <h5>万圣节又叫诸圣节，在每年的11月1日，是西方的传统节日。是西方的传统节日。是西方的传统节日。是西方的传统节日。是西方的传统节日。</h5>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="screen-right">
                    <div class="login-info">
                        <div class="login-top">
                            <div class="head_pic">
                                <span></span>
                            </div>
                            <span>Hi!你好</span>
                        </div>
                        <div class="login-bottem">
                            <a href="#" class="coin">
                                <span></span>
                                领淘金币抵钱
                            </a>
                            <a href="#" class="club">
                                <span></span>
                                会员俱乐部
                            </a>
                        </div>
                        <div class="login-operator">
                            <div class="login-operator-content">
                                <a href="#">登录</a>
                                <a href="#">注册</a>
                                <a href="#">开店</a>
                            </div>
                        </div>
                    </div>
                    <div class="report">
                        <a href="#">
                            网上有害信息举报专区
                            <span></span>
                        </a>
                    </div>
                    <div class="notify">
                        <div class="tab">
                            <ul>
                                <li>
                                    <a href="#">公告</a>
                                </li>
                                <li>
                                    <a href="#">规则</a>
                                </li>
                                <li>
                                    <a href="#" class="active">论坛</a>
                                </li>
                                <li>
                                    <a href="#">安全</a>
                                </li>
                                <li>
                                    <a href="#">公益</a>
                                </li>
                            </ul>
                        </div>
                        <div class="info">
                            <ul>
                                <li>
                                    <a href="#" class="active">淘宝公益平台正式更名</a>
                                </li>
                                <li>
                                    <a href="#">益起来商家招募即将截</a>
                                </li>
                                <li>
                                    <a href="#">卖家如何设置公益宝贝</a>
                                </li>
                                <li>
                                    <a href="#">公益机构开店全攻略</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="service">
                        <ul>
                            <li>
                                <a href="#">
                                    <span class="pic-icon1"></span>
                                    <h2>充话费</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon2"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon3"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon4"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon5"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon6"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon7"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon8"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon9"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon10"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    
                                    <span class="pic-icon11"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pic-icon12"></span>
                                    <h2>旅行</h2>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="app">
                        <h2>
                            阿里APP
                            <span>更多></span>
                        </h2>
                        <ul>
                            <li>
                                <a href="#" class="pic-app1"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app2"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app3"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app4"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app5"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app6"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app7"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app8"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app9"></a>
                            </li>
                            <li>
                                <a href="#" class="pic-app10"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>